<template>
  <view class="search-bar">
    <uni-search-bar
      :placeholder="placeholder"
      v-model="searchValue"
      @confirm="onSearch"
      @clear="onClear"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      :radius="10"
      cancelButton="none"
      bgColor="#F5F5F5"
    />
  </view>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '搜索'
    }
  },
  data() {
    return {
      searchValue: '',
      isFocused: false
    };
  },
  methods: {
    onSearch() {
      this.$emit('search', this.searchValue);
    },
    onClear() {
      this.searchValue = '';
      this.$emit('clear');
    },
    onInput(e) {
      this.searchValue = e.value;
    },
    onFocus() {
      this.isFocused = true;
    },
    onBlur() {
      this.isFocused = false;
    },
    clearSearch() {
      this.searchValue = '';
    },
    triggerSearch() {
      this.onSearch();
    }
  }
};
</script>

<style scoped lang="scss">
.search-bar {
  padding: 12px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

::v-deep .uni-searchbar {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

::v-deep .uni-searchbar__box {
  background-color: #f5f5f7 !important;
  border-radius: 10px !important;
  border: 1px solid #e0e0e0 !important;
  height: 40px !important;
}

::v-deep .uni-searchbar__box-icon-search {
  margin-left: 10px !important;
}

::v-deep .uni-searchbar__text-placeholder {
  font-size: 14px !important;
  color: #999 !important;
}
</style>
